<div class="bs-docs-section" ng-controller="AlertDemoCtrl">

  <div class="page-header">
    <h1 id="alerts">Alerts <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/alert/alert.js" target="_blank">alert.js</a>
    </h1>
    <code>mgcrea.ngStrap.alert</code>
  </div>


  <h2 id="alerts-examples">Examples</h2>
  <p>Alerts are styled tiny dialogs that inherit the behavior of modals.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Alerts require the <a href="#modals">modal plugin</a> to be included.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="alert/docs/alert.demo.html" data-content-js-url="alert/docs/alert.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <pre class="bs-example-scope">$scope.alert = {{alert | json}};</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>

    <!-- Button to trigger a default alert with a scope as an object {title:'', content:'', etc.} -->
    <button class="btn btn-lg btn-primary" data-placement="top-right" data-container="body" data-duration="3" bs-alert="alert">Click to toggle alert
      <br />
      <small>(using an object)</small>
    </button>

    <!-- You can also use data-attrs to assign scope variables -->
    <button class="btn btn-lg btn-primary" title="{{alert.title}}" data-content="{{alert.content}}" data-type="success" data-container="#alerts-container" bs-alert>Click to toggle alert
      <br />
      <small>(using data-attrs)</small>
    </button>

    <!-- You can use a custom html template with the `data-template` attr -->
    <button class="btn btn-lg btn-danger" data-template="alert/docs/alert.demo.tpl.html" data-placement="top" data-duration="3" data-animation="am-fade-and-slide-top" data-container="body" data-keyboard="true" bs-alert="alert">Custom alert
      <br />
      <small>(using data-template)</small>
    </button>

    <!-- Element container to append the first alert -->
    <hr>
    <div id="alerts-container"></div>

  </div>


  <h2 id="alerts-usage">Usage</h2>
  <p>Append a <code>bs-alert</code>attribute to any element to enable the plugin.</p>
  <div class="callout callout-info">
    <h4>The module also exposes an <code>$alert</code>service</h4>
    <p>Available for programmatic use (inside a controller/directive).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .controller('DemoCtrl', function($scope, $alert) {
            var myAlert = $alert({title: 'Holy guacamole!', content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', show: true});
          })
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-aside</code> attribute</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 50px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by ngAnimate</td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>''</td>
          <td>how to position the alert - top | top-left | top-right <small>(requires custom CSS)</small>.</td>
        </tr>
        <tr>
          <td>title</td>
          <td>string</td>
          <td>''</td>
          <td>default title value if <code>title</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>content</td>
          <td>string</td>
          <td>''</td>
          <td>default content value if <code>data-content</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>type</td>
          <td>string</td>
          <td>'info'</td>
          <td>default content value if <code>data-type</code>attribute isn't present</td>
        </tr>
<!--
Removing keyboard from the docs. Our template doesn't have tabindex for focus stealing issues, keyboard won't work
so remove the option then. Just looks bad to have an option that doesn't work
        <tr>
          <td>keyboard</td>
          <td>boolean</td>
          <td>true</td>
          <td>Closes the alert when escape key is pressed</td>
        </tr>
-->
        <tr>
          <td>show</td>
          <td>boolean</td>
          <td>true</td>
          <td>Shows the alert when initialized.</td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the alert to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the alert in the flow of the document near the triggering element -&nbsp;which will prevent the alert from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>controller</td>
          <td>string|function</td>
          <td>false</td>
          <td>
            <p>Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.</p>
          </td>
        </tr>
        <tr>
          <td>controllerAs</td>
          <td>string</td>
          <td>false</td>
          <td>
            <p>A controller alias name. If present the controller will be published to scope under the `controllerAs` name.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>Provide an html template as a string (when templateUrl is falsy).</p>
          </td>
        </tr>
        <tr>
          <td>templateUrl</td>
          <td>path</td>
          <td>'alert/alert.tpl.html'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
            <p>It should be a <code>div.alert</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/alert/alert.tpl.html" target="_blank">like this</a>).</p>
          </td>
        </tr>
        <tr>
          <td>duration</td>
          <td>number | false</td>
          <td>false</td>
          <td>
            <p>If provided, the number of seconds the alert should be displayed for before it is automatically closed. Default keeps alert open until explicity closed.</p>
          </td>
        </tr>
        <tr>
          <td>dismissable</td>
          <td>boolean</td>
          <td>true</td>
          <td>
            <p>Make the alert dismissable by adding a close button (&times;).</p>
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the alert is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the alert is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the alert is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the alert is hidden.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$alertProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($alertProvider) {
            angular.extend($alertProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })
        </code>
      </pre>
    </div>
  </div>


  <h3>Scope methods</h3>
  <p>Methods available inside the directive scope to toggle visibility.</p>

  <h4>$show()</h4>
  <p>Reveals the alert.</p>

  <h4>$hide()</h4>
  <p>Hides the alert.</p>

  <h4>$toggle()</h4>
  <p>Toggles the alert.</p>

</div>
